<template>
	<view class="container">
		<u-image width="252rpx" height="222rpx" src="/static/images/login.png"></u-image>

		<button class="btn-wrap" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="agree[0]">
			<view class="wexin-box">
				<u-icon name="weixin-fill" color="#fff" size="40"></u-icon>
				<text>微信授权登录</text>
			</view>
		</button>
        <u-modal :show="showAgreementModal" title="用户协议" content='确认您已阅读并同意用户协议?' :showCancelButton="true" @cancel="showAgreementModal=false" @confirm="handleAgreement"></u-modal>
        <button class="btn-wrap" style="background-color: grey;" @click="showAgreementModal=true" v-if="!agree[0]">
            <view class="wexin-box">
                <u-icon name="weixin-fill" color="#fff" size="40"></u-icon>
                <text>微信授权登录</text>
            </view>
        </button>


		<u-checkbox-group v-model="agree" placement="column">
			<view class="agreement-box">
				<u-checkbox name="agreeCheck" shape="circle" v-model:checked="agree[0]"></u-checkbox>
				<view class="context">
					<text>登录代表你已同意</text>
					<text class="color" @tap="goAgreement(1)">《用户协议》</text>
					<text>和</text>
					<text class="color" @tap="goAgreement(2)">《隐私协议》</text>
				</view>
			</view>
		</u-checkbox-group>

	</view>
</template>

<script setup>
    import { computed, ref } from 'vue'
    import { onLoad, onShow } from '@dcloudio/uni-app'
    import { useUserStore } from '@/store';
    import { getSession, loginByMobile } from '@/api/login';
    import useUniAPi from '@/hooks/useUniAPi'
    const { navigateTo } = useUniAPi()
    // 用户store
    const userStore = useUserStore();

    const loginCode = ref(null)
    const agree = ref([])
    const showAgreementModal = ref(false)
	const phoneParams = ref({
		code: '',
		encryptedData: '',
		iv: ''
	})

    // 从其它页面跳转过来的
    const fromPath = ref(null)

    onLoad( (evt) => {
        fromPath.value = evt?.fromPath || null
        getloginCode()
    })

    const getloginCode = () => {
        uni.login({
            provider: 'weixin',
            success(res) {
                console.log("登录code", res);
                loginCode.value = res.code
            }
        })
    }
    // 同意协议
    const handleAgreement = () => {
        agree.value[0] = true
        showAgreementModal.value = false
    }

	// 获取手机号code  传给服务端
	const getPhoneNumber = (res) => {

		if (!agree.value[0]) {
			return uni.showToast({
				mask: true,
				title: '请阅读并同意用户协议',
				icon: 'none'
			})
		}

		console.log('获取手机号信息', res);
		phoneParams.value.code = res.detail.code //获得的手机号code
		phoneParams.value.encryptedData = res.detail.encryptedData //解密
		phoneParams.value.iv = res.detail.iv

		handleLogin()
	}

	// 微信登录
	const handleLogin = async () => {
        const {data,code,message} = await getSession({code: loginCode.value})
        if (code != 1) {
            return uni.showToast({
                mask: true,
                title: '登录异常',
                icon: 'none'
            })
        }
        const openid = data?.openid ?? ''
        const result = await loginByMobile({openid:openid, encryptedData: phoneParams.value.encryptedData, iv: phoneParams.value.iv})
        const token = result?.data?.token ?? ''
        if (result.code != 1 || !token) {
            return uni.showToast({
                mask: true,
                title: result?.message ?? '登录异常',
                icon: 'none'
            })
        }

        userStore.setToken(token)
        userStore.syncUserInfo()

        uni.showToast({
            title: "登录成功",
            icon: 'success',
            duration: 1500
        })

        navigateTo({
            url: fromPath.value || "/pages/index/index"
        })
	}

	// 用户协议和隐私政策 1用户 2隐私
	const goAgreement = (e) => {
		uni.navigateTo({
			url: `/mine/agreement/agreement?status=${e}`
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		@include center();
		flex-direction: column;
		padding-top: 240rpx;

		.btn-wrap {
			margin-top: 350rpx;
			width: 600rpx;
			background: #00C559;
			border-radius: 20rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			.wexin-box {
				@include center();
				padding: 16rpx;
				& > text {
					margin-left: 10rpx;
				}
			}
		}

		.agreement-box {
			@include center();
			margin-top: 200rpx;

			.context {
				font-size: 26rpx;
				color: #333333;
				margin-left: 10rpx;

				.color {
					color: #3152BA;
				}
			}
		}
	}
</style>
